<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>马蜂窝-首页</title>
    <link href="css/css_13_首页布局示例.css" rel="stylesheet">
</head>
<body>

<!--============1. 头部导航 nav====================-->
<div class="nav">
    <div class="head-logo">
        <a href=""></a>
    </div>
    <div class="head-nav">
        <ul>
            <li><a href="" class="first-item">首页</a></li>
            <li><a href="">目的地</a></li>
            <li><a href="">旅游攻略</a></li>
            <li><a href="">去旅行</a></li>
            <li><a href="">机票</a></li>
            <li><a href="">订酒店</a></li>

        </ul>
    </div>
    <div class="head-login">
        <a href="">
            <img class="login-logo" src="images/login-logo.svg"/>
            <span class="login-title">登录</span>
        </a>
        <a href="">
            <span class="login-logo regist-logo"></span>
            <span class="login-title">注册</span>
        </a>

    </div>
</div>


<!--============2. 横幅banner====================-->
<div class="banner">
    <a href="" class="show-img">
        <img src="images/banner.jpg">
    </a>
    <ul class="show-nav">
        <li><a href=""><img src="images/small-banner1.png"></a></li>
        <li><a href=""><img src="images/small-banner2.png"></a></li>
        <li><a href=""><img src="images/small-banner3.png"></a></li>
        <li><a href=""><img src="images/small-banner4.png"></a></li>
        <li><a href=""><img src="images/small-banner5.png"></a></li>


    </ul>

    <div class="search-area">
        <form action="" class="search-form">
            <input type="text" class="keyword" placeholder="搜索目的地或攻略">
            <a href="" class="search-btn"></a>
        </form>
    </div>

</div>

<!--============3. 主要内容 main====================-->
<div class="main">

    <!--左边推广-->
    <div class="aside-ad">
        <ul>
            <li class="ad-item">
                <h2>旅行家专栏</h2>
                <a href=""></a>
            </li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

    </div>
    <!--右边游记列表-->
    <div class="right-note-list"></div>

</div>

<!--============4. 底部footer====================-->
<div class="footer"></div>

</body>
</html>